<template>
    <transition name="fade" @after-leave="afterLeave" @after-enter="afterEnter">
        <div v-show="visible" :style="style" class="notification" @mouseenter="clearTimer" @mouseleave="createTimer">
            <span class="content">{{content}}</span>
            <a @click="close" class="btn">{{btn}}</a>
        </div>
    </transition>
</template>

<script>
export default {
    name:'Notification',
    data(){
        return {
            visible:true // 是否显示
        }
    },
    props:{
        content:{
            type:String,
            required:true
        },
        btn:{
            type:String,
            default:'关闭'
        }
    },
    methods:{
        close(e){
            e.preventDefault()

            this.$emit('close')
        },
        // 要彻底关闭（销毁）弹出框了
        afterLeave(){
            this.$emit('closed')
        },
        afterEnter(){},
        clearTimer(){},
        createTimer(){}
    },
    computed:{
        style(){
            return {}
        }
    }
}
</script>

<style scoped>
    .fade-enter,.fade-leave-to{
        opacity: 0;
    }
    .fade-enter-to,.fade-leave{
        opacity: 1;
    }
    .fade-enter-active,.fade-leave-active{
        transition: all 0.5s;
    }
    .notification{
        display:flex;
        background-color: #303030;
        color: rgba(255, 255, 255, 1);
        align-items: center;
        padding: 20px;
        position: fixed;
        min-width: 280px;
        box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2) 0px 6px 10 px 0px rgba(0, 0, 0, 0.2);
        flex-wrap: wrap;
        transition: all .3s;
    }
    .content{
        padding: 0;
    }
    .btn{
        color: #ff4081;
        padding-left: 24px;
        margin-left: auto;
        cursor:pointer;
    }
</style>
